<template>
  <el-dialog
    title="新增"
    :visible.sync="dialogVisible"
    v-if="dialogVisible"
    width="30%"
    class="popup"
    :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="请选择" prop="type">
        <el-select v-model="ruleForm.type" clearable placeholder="请选择">
          <el-option
            v-for="item in typeData"
            :key="item.type"
            :label="item.label"
            :value="item.type">
          </el-option>
        </el-select>
        <!-- <el-select v-if ="'4-2'" v-model="ruleForm.type" clearable placeholder="请选择">
          <el-option
            v-for="item in typeData"
            :key="item.type"
            :label="item.label"
            :value="item.type">
          </el-option>
        </el-select> -->
      </el-form-item>
      <el-form-item label="请输入" prop="label">
        <el-input v-model="ruleForm.label" clearable></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" size="small"  @click="handleAddSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        typeData: null,
        id: 2,
        ruleForm: {
          type: '',
          label: ''
        },
      };
    },
    computed: {
      rules() {
        return {
          type: [
            { required: true, message: '请选择', trigger: 'blur' },
          ],
          label: [
            { required: true, message: '请输入', trigger: 'blur' },
          ],
        }
      }
        
    },
    methods: {
      toggleAdd(flag, type) {
        this.dialogVisible = flag
        if (this.dialogVisible) {
          console.log(999,this.$config.personnelType[type])
          this.typeData = this.$config.personnelType[type]
          this.ruleForm = {
            type: '',
            label: '',
          }
          console.log(type)
          console.log(this.typeData)
        }
      },
      handleAddSubmit() {
        let flag = false
        this.$refs.ruleForm.validate((valid) => {
          if (!valid) {
            flag = true
          }
        })
        if (flag) return

        const data = {
          id: this.id++, 
          type: this.ruleForm.type,
          label: this.ruleForm.label, 
          isEdit: false, 
          children: [],
          icon: 'organize_province'
        }
        this.$emit('addPersonnel', JSON.parse(JSON.stringify(data)))
        this.dialogVisible = false
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>

<style lang="scss" scoped>
  .popup {
    ::v-deep .el-dialog {
      border-radius: 4px;
    }
    ::v-deep .el-dialog__header {
      border-bottom: 1px solid #cdd0db;
    }
    ::v-deep .el-dialog__body {
      padding: 30px;
    }
  }
</style>